$(function(){
  var layer = layui.layer
  $img = $('#image')
  const options = {
    // 纵横比,裁剪的框是一个什么形状的
    aspectRatio:1,
    // 指定的预览区
    preview:'.img-preview'
  }
  // 创建裁剪区域
  $img.cropper(options)

  $('#upload').click(function(){
    $('#file').click()
  })

  $('#file').on('change',function(e){
    // 获取当前选择的图片
    var imglist = e.target.files
    if(imglist.length === 0) {
      return layer.msg('请选择图片')
    }
     // 1. 拿到用户选择的文件
    var file =  e.target.files[0]
     // 2. URL.createObjectURL() 可以将文件，转化为路径
     var imgUrl = URL.createObjectURL(file)
     $img // 3. 重新初始化裁剪区域
     .cropper('destroy') // 销毁旧的裁剪区域
     .attr('src', imgUrl) // 重新设置图片路径
     .cropper(options) // 重新初始化裁剪区域
      
  })

  $('#ascertain').on('click',function(){
    var dataURL = $img
    .cropper('getCroppedCanvas', {
      // 创建一个 Canvas 画布
      width: 100,
      height: 100
    })
    .toDataURL('image/png')
    $.ajax({
      type:'post',
      url:'/my/update/avatar',
      data:{
        avatar:dataURL
      },
      success:function(res){
        if(res.status != 0) {
          return layer.msg(res.message)
        }
        layer.msg('更换头像成功')
        window.parent.getUserInfo()
      }
    })
  })
})